<div fxLayout="column" class="bigger">
  <div fxLayout="row"
       fxLayoutAlign="start center"
       fxLayoutGap="20px"
       style="height:30px; min-height:30px;">
    <h2>Layout Demos: </h2>
    <span>Version: {{version}}</span>
  </div>
  <div fxLayout="column" fxLayoutAlign="left top" style="font-size: 0.85em; margin-top: 10px; padding-bottom:20px; white-space:normal">
    These Layout demos are curated from the AngularJS Material documentation, GitHub Issues, StackOverflow, and CodePen.
    <span class="title" style="font-size: 0.7em; font-weight:normal;">
      Hint: Click on any of the samples below to toggle the layout direction(s).
    </span>
  </div>
  <div fxLayout="row"
       fxLayoutGap="20px"
       fxHide.print
       style="height:40px; min-height:40px;">
    <button mat-raised-button color="primary" [routerLink]="['']">
      Static
    </button>
    <button mat-raised-button color="primary" [routerLink]="['grid']"> Grids</button>
    <button mat-raised-button color="primary" [routerLink]="['responsive']"> Responsive
    </button>
    <button mat-raised-button color="primary" [routerLink]="['issues']"> Github</button>
    <button mat-raised-button color="primary" [routerLink]="['stackoverflow']"> StackOverflow
    </button>
  </div>
</div>

<div class="demo-content">
  <router-outlet></router-outlet>
  <watermark
      title="@angular/layout"
      message="HTML Layouts w/ Flex and Grid CSS"
      fxHide fxShow.print></watermark>
</div>
